import React from 'react';
import ReactDOM from 'react-dom';

//增量更新 也就是增加一个元素不会把之前渲染的全删了 重新渲染(就是dom-diff,最小化更新)

class App extends React.Component {
  state = {list: new Array(10).fill(0)};

  add = ()=>{
    this.setState({list: [...this.state.list, 1]});
  }

  render() {
    return (
      <ul>
        <input type="text"/>
        <button onClick={this.add}>add</button>
        {
          this.state.list.map((item,index)=><li key={index}>{item}</li>)
        }
      </ul>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('root'));
